[#assign title]个人中心[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style>
    img.icon {
        width: 24px;
        height: 24px;
    }

    .media .head {
        width: 80px;
        height: 80px;
    }

    .media-body .mint-cell:last-child {
        background-size: 0px;
    }

    .mint-cell-wrapper {
        padding: 0px;
    }

</style>
[/#macro]
[#macro body]
<div class="media">
    <img class="mr-1 head rounded-circle" :src="customer.head | headImg">
    <div class="media-body">
        <mt-cell>
            <span slot="title">{{customer.nickname}}
                <template v-if="customer.rank">({{customer.rank}})</template>
            </span>
        </mt-cell>
        [#--<mt-cell is-link to="/customer/mobile/change" v-if="customer.mobile">--]
            [#--<span slot="title">{{customer.nickname}}--]
                [#--<template v-if="customer.rank">({{customer.rank}})</template>--]
            [#--</span>--]
            [#--<span class="small">更换手机</span>--]
        [#--</mt-cell>--]
        [#--<mt-cell is-link to="/customer/mobile/bind" v-else>--]
            [#--<span slot="title">{{customer.nickname}}--]
                [#--<template v-if="customer.rank">({{customer.rank}})</template>--]
            [#--</span>--]
            [#--<span class="small">绑定手机</span>--]
        [#--</mt-cell>--]
        <mt-cell>
            <template slot="title">
                <div class="row">
                    <div class="col-6">
                        <div class="d-flex justify-content-start">金豆</div>
                        <div class="d-flex justify-content-start text-danger">{{customer.balance | formatDecimal}}</div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-center">积分</div>
                        <div class="d-flex justify-content-center text-success">{{customer.point}}</div>
                    </div>
                </div>
            </template>
        </mt-cell>
    </div>
</div>
<mt-cell title="充值金豆" is-link to="/recharge/index">
    <img slot="icon" class="icon" src="/static/images/customer/if_money_bag_309025.svg"/>
</mt-cell>
<mt-cell title="每日签到" is-link to="/signin/index">
    <img slot="icon" class="icon" src="/static/images/customer/if_location_728975.svg"/>
</mt-cell>
<mt-cell title="游戏记录" is-link to="/room/chat">
    <img slot="icon" class="icon" src="/static/images/customer/if_clock_728924.svg"/>
</mt-cell>
<mt-cell title="排行榜" is-link to="/rank">
    <img slot="icon" class="icon" src="/static/images/customer/if_crown_728988.svg"/>
</mt-cell>
<mt-cell title="二维码" is-link to="/customer/qrcode">
    <img slot="icon" class="icon" src="/static/images/customer/if_qr_code_2639895.svg"/>
</mt-cell>
<mt-cell title="邀请好友" is-link to="/invite/index">
    <img slot="icon" class="icon" src="/static/images/customer/if_add_user_925890.svg"/>
</mt-cell>
<mt-cell title="常见问题" is-link to="/help">
    <img slot="icon" class="icon" src="/static/images/customer/if_help_330398.svg"/>
</mt-cell>
<mt-cell title="联系客服" is-link to="/customer/service">
    <img slot="icon" class="icon" src="/static/images/customer/if_support_2303158.svg"/>
</mt-cell>
<mt-cell title="退出登录" is-link to="/logout">
    <img slot="icon" class="icon" src="/static/images/customer/if_exit_728935.svg"/>
</mt-cell>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            customer: {
                mobile: '',
                balance: 0.00,
                point: 0,
                credit: 0,
                head: ''
            }
        },
        methods: {},
        computed: {},
        mounted: function () {
            appHeader.isShow = false;
            appFooter.isShow = true;
            var vm = this;
            axios.post('/customer/detail').then(function (response) {
                vm.customer = response.data;
            });
        }
    });
</script>
[/#macro]